<div ng-cloak>

    <div class="uk-margin-top" ng-show="repeaterfields.length">

        <div class="js-repeaterfields" ng-show="editmode">
            <div class="uk-panel app-panel uk-margin" ng-repeat="repeaterfield in repeaterfields">
                <a class="uk-icon-bars uk-cursor-move js-repeaterfield-drag"></a>
                {{ repeaterfield.type }}
                <a class="uk-text-danger uk-float-right" ng-click="removerepeaterfield($index)"><i class="uk-icon-trash-o"></i></a>
            </div>
        </div>

        <div ng-show="!editmode">
            <div class="uk-margin" ng-repeat="repeaterfield in repeaterfields">
                <div class="uk-margin-small-bottom uk-clearfix">
                    <span class="uk-badge app-badge">{{ repeaterfield.type }}</span>
                </div>
                <contentfield options="{{ repeaterfield }}" ng-model="repeaterfield.value"></contentfield>
            </div>
        </div>

    </div>

    <div class="uk-alert" ng-show="!repeaterfields.length">No fields.</div>

    <hr>

    <div class="uk-margin">

        <div class="uk-button-dropdown" data-uk-dropdown="{ mode: 'click' }">
            <a class="uk-link-muted"><i class="uk-icon-plus-circle"></i> Add field</a>
            <div class="uk-dropdown uk-dropdown-up uk-dropdown-scrollable uk-dropdown-small uk-text-left">
                <ul class="uk-nav uk-nav-dropdown">
                    <li class="uk-nav-header">Field Types</li>
                    <li ng-repeat="f in contentfields"><a ng-click="addrepeaterfield(f.name)">{{ f.label}}</a></li>
                </ul>
            </div>
        </div>

        <a href="" ng-click="(editmode=!editmode)" ng-show="repeaterfields.length">
            -
            <span ng-show="!editmode">Manage fields</span>
            <span ng-show="editmode">Close</span>
        </a>
    </div>
</div>
